<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 布局、动画练习</title>
    <link rel="stylesheet" href="./css/main.css">

    <style>
        #none {
            display: none;
        }

        #head {
            border: 1px rgb(136, 93, 93) solid;
            width: 410px;
            height: 100px;
            margin-bottom: 10px;
        }

        #main {
            border: 1px rgb(136, 93, 93) solid;
            width: 400px;
            /* height: 200px;*/
            margin-bottom: 10px;
            padding: 5px;
            overflow: hidden;
        }

        #left {
            border: 1px rgb(136, 93, 93) solid;
            width: 100px;
            height: 100px;
            float: left;
            text-align: center;
            line-height: 100px;
        }

        #middle {
            border: 1px rgb(136, 93, 93) solid;
            width: 184px;
            height: 100px;
            margin-left: 5px;
            float: left;
        }

        #right {
            border: 1px rgb(136, 93, 93) solid;
            width: 100px;
            height: 100px;
            margin-left: 5px;
            float: left;
        }

        .xz {
            height: 100px;
            width: 100px;
            border: 1px coral solid;
            position: fixed;
            right: 10px;
        }

        .relative {
            position: relative;
            top: 150px;
        }

        .absolute {
            position: absolute;
            top: 150px;
        }

        .bg {
            background-color: #fcc;
        }

        .fl {
            float: left;
            width: 30%;
        }

        .container {
            margin: 0 auto;
            overflow: hidden;
            height: 1000px;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: " ";
        }

        .clearfix:after {
            clear: both;
        }

        body {
            color: #fff;
            margin: 12px 15px;
        }

        h1,
        h2 {
            color: #080e14;
        }

        .original,
        .box {
            border-radius: 6px;
        }

        .original {
            background: #eaeaed;
            border: 1px dashed #cecfd5;
            float: left;
            margin: 12px 15px;
        }

        .box {
            background: #ec40aa;
            height: 95px;
            line-height: 95px;
            text-align: center;
            width: 95px;
        }

        .box-1 {
            transform: rotate(20deg);
        }

        .box-2 {
            transform: rotate(-55deg);
        }

        .box-3 {
            transform: scale(0.5);
        }

        .box-4 {
            transform: scale(0.5, 1.5);
        }

        .box-5 {
            transform: translate(20px, 20%);
        }

        .box-6 {
            transform: translate(-50%);
        }

        .box-7 {
            transform: skew(15deg);
        }

        .box-8 {
            transform: skewY(15deg);
        }

        .box-9 {
            transform: skew(15deg, 15deg);
        }

        .box-10 {
            transform: perspective(100px) rotateX(15deg);
        }

        .box-11 {
            transform: perspective(1100px) rotateX(15deg);
        }

        .box-12 {
            transform: perspective(100px) rotateX(45deg);
        }

        .box-13 {
            transform: perspective(100px) rotateY(45deg);
        }

        .box-14 {
            transform: perspective(100px) rotateZ(45deg);
        }

        .box-15 {
            transform: perspective(100px) rotateY(180deg);
        }

        .box-16 {
            transform: perspective(100px) rotateY(180deg);
            backface-visibility: hidden;
        }

        @keyframes slide {
            from {
                left: 0;
                top: 0;
            }

            50% {
                left: 50%;
                top: 50%;
            }

            to {
                left: calc(100% - 50px);
                top: 0;
            }
        }

        .stage {
            background: rgb(201, 81, 81);
            border-radius: 6px;
            height: 150px;
            position: relative;
            width: 500px;
        }

        .stage:hover .ball {
            animation: slide 2s linear;
        }

        .ball {
            background: #5da76d;
            border-radius: 50%;
            height: 50px;
            position: absolute;
            width: 50px;
            margin: 0;
        }
    </style>
</head>

<body>
    <header>
        <h1>CSS 布局、动画练习</h1>
    </header>
    <main>
        <section>
            <h2>dispiay属性</h2>
            <div id="none">元素如何显示，可以通过 display 属性进行指定。</div>
            <div>元素如何显示，可以通过 display 属性进行指定。</div>
        </section>
        <section>
            <div id="head">头部</div>
            <div id="main">
                <div id="left">左侧</div>
                <!--<div id="middle">中间</div>-->
                <div id="right">右侧</div>
                <p style="clear: both;">这是浮动后的文字这是浮动后的文字这是浮动后的文字这是浮动后的文字这是浮动后的文字这是浮动后的文字这是浮动后的文字这是浮动后的文字</p>
            </div>
        </section>
        <section>
            <h2>position</h2>
            <div class="xz"></div>
            <div class="container">
                <div class="fl">
                    <h2>正常信息流</h2>
                    <p>孩子，你真是快活啊，一早晨坐在泥土里，耍着折下来的小树枝。</p>
                    <p>我微笑着看你在那里耍着那根折下来的小树枝。</p>
                    <p class="bg">我正忙着算账，一小时一小时在那里加叠数字。</p>
                    <p>也许你在看我，想到：“这种好没趣的游戏，竟把你的一早晨的好时间浪费掉了!"</p>
                    <p>孩子，我忘了聚精会神玩耍树枝与泥饼的方法了。</p>
                </div>
                <div class="fl">
                    <h2>相对定位</h2>
                    <p>孩子，你真是快活啊，一早晨坐在泥土里，耍着折下来的小树枝。</p>
                    <p>我微笑着看你在那里耍着那根折下来的小树枝。</p>
                    <p class="bg relative">我正忙着算账，一小时一小时在那里加叠数字。</p>
                    <p>也许你在看我，想到：“这种好没趣的游戏，竟把你的一早晨的好时间浪费掉了!"</p>
                    <p>孩子，我忘了聚精会神玩耍树枝与泥饼的方法了。</p>
                    <code>.relative {	position: relative; top:150px;}</code>
                </div>
                <div class="fl" style="position: relative;">
                    <h2>绝对定位</h2>
                    <p>孩子，你真是快活啊，一早晨坐在泥土里，耍着折下来的小树枝。</p>
                    <p>我微笑着看你在那里耍着那根折下来的小树枝。</p>
                    <p class="bg absolute">我正忙着算账，一小时一小时在那里加叠数字。</p>
                    <p>也许你在看我，想到：“这种好没趣的游戏，竟把你的一早晨的好时间浪费掉了!"</p>
                    <p>孩子，我忘了聚精会神玩耍树枝与泥饼的方法了。</p>
                </div>
            </div>

        </section>
        <section>
            <div class="center-table">
                <p>I'm vertically centered multiple lines of text in a CSS-created table layout.</p>
            </div>
            <style>
                .center-table {
                    display: table;
                    height: 250px;
                    background: white;
                    width: 240px;
                    margin: 20px;
                }

                .center-table p {
                    display: table-cell;
                    margin: 0;
                    background: black;
                    color: white;
                    padding: 20px;
                    border: 10px solid white;
                    vertical-align: middle;
                }
            </style>
        </section>
        <section>
            <h1>变形练习</h1>
            <div class="clearfix">
                <h2>旋转</h2>
                <div class="original">
                    <div class="spin">
                        <figure class="box box-1">Box 1</figure>
                    </div>
                </div>
                <div class="original">
                    <div class="spin">
                        <figure class="box box-2">Box 2</figure>
                    </div>
                </div>
            </div>
            <div class="clearfix">
                <h2>缩放</h2>
                <div class="original">
                    <div class="spin">
                        <figure class="box box-3">Box 3</figure>
                    </div>
                </div>
                <div class="original">
                    <div class="spin">
                        <figure class="box box-4">Box 4</figure>
                    </div>
                </div>
            </div>
            <div class="clearfix">
                <h2>位移</h2>
                <div class="original">
                    <div class="spin">
                        <figure class="box box-5">Box 5</figure>
                    </div>
                </div>
                <div class="original">
                    <div class="spin">
                        <figure class="box box-6">Box 6</figure>
                    </div>
                </div>
            </div>
            <div class="clearfix">
                <h2>倾斜</h2>
                <div class="original">
                    <div class="spin">
                        <figure class="box box-7">Box 7</figure>
                    </div>
                </div>
                <div class="original">
                    <div class="spin">
                        <figure class="box box-8">Box 8</figure>
                    </div>
                </div>
                <div class="original">
                    <div class="spin">
                        <figure class="box box-9">Box 9</figure>
                    </div>
                </div>
            </div>
            <div class="clearfix">
                <h2>透视</h2>
                <div class="original">
                    <div class="spin">
                        <figure class="box box-10">Box 10</figure>
                    </div>
                </div>
                <div class="original">
                    <div class="spin">
                        <figure class="box box-11">Box 11</figure>
                    </div>
                </div>
            </div>
            <div class="clearfix">
                <h2>3D旋转</h2>
                <div class="original">
                    <div class="spin">
                        <figure class="box box-12">Box 12</figure>
                    </div>
                </div>
                <div class="original">
                    <div class="spin">
                        <figure class="box box-13">Box 13</figure>
                    </div>
                </div>
                <div class="original">
                    <div class="spin">
                        <figure class="box box-14">Box 14</figure>
                    </div>
                </div>
            </div>
            <div class="clearfix">
                <h2>背部可见性</h2>
                <div class="original">
                    <div class="spin">
                        <figure class="box box-15">Box 15</figure>
                    </div>
                </div>
                <div class="original">
                    <div class="spin">
                        <figure class="box box-16">Box 16</figure>
                    </div>
                </div>
            </div>
        </section>
        <section>
            <h2>动画练习</h2>
            <style>
                .xxz {
                    background: #49ee7a;
                    transition-property: all;
                    transition-duration: 1s;
                    transition-timing-function: linear;
                    transition-delay: 1s;
                    width: 100px;
                    height: 100px;
                    text-align: center;
                    line-height: 100px;
                }

                .xxz:hover {
                    background: #ff7b29;
                    border: 1px #ccc solid;
                    border-radius: 100px;
                    color: darkgray;
                }
            </style>
            <div class="xxz">
                xxz
            </div>
        </section>
        <section>
            <h1>图片翻转效果</h1>
            <div class="card-container">
                <div class="card">
                    <div class="side"><img src=http://img2.imgtn.bdimg.com/it/u=3217073503,3989020289&fm=26&gp=0.jpg
                            <div class="side back">笑赞</div>
                </div>
            </div>
        </section>
        <section>
            <div class="stage">
                <figure class="ball"></figure>
            </div>
        </section>
</body>
</main>
<footer style="clear: both" ;>
    <p><span>《网页制作与制作》课程练习</span><span>学号：P171212429</span> <span>指导老师：杨志宏</span></p>
</footer>
</body>

</html>